@import "common.less";

/*全局变量*/
*{margin:0;padding:0}
ul,li{list-style-type:none;}
img {border:0;-ms-interpolation-mode: bicubic;max-width: 100%;}
input,textarea,button{outline: none;}
/*a,button{
  -webkit-tap-highlight-color: transparent;
}*/
html,body{height:100%;}
body{
  font: normal 100% PingFangSC-Light, Helvetica, "microsoft yahei", sans-serif;color:#000;position: relative;
  a{color:#333;text-decoration:none;cursor: pointer;
    &:visited{color:#333;}
  }
}
//公用样式
.body{min-height: 100%;}
.disNone{display: none;}
.menu-side{position: fixed;top: 58px;right: 52px;width: 45px;height: 43px;background: url("../img/home-menu.png") no-repeat;z-index: 99;}


//底部显示
footer{
  .foot-left{
    position: fixed;left: 35px;bottom: 35px;height: 40px;z-index: 99;
    .info{color: fadeout(@color-blue,40%);float: left;height: 24px;margin-top: 8px;font-size: 12px;padding-left: 10px;border-left: 2px solid @color-blue;line-height: 12px;}
    .line{float: left;height: 2px;width: 45px;margin: 27px 0 0 35px;background-color: @color-blue;}
    .data{float: left;height: 100%;
      span{line-height: 20px;color: fadeout(@color-blue,70%);float: left;margin-left:35px;font-size: 16px;}
    }
  }
  .foot-right{
    position: fixed;right: 35px;bottom: 35px;text-align: right;z-index: 99;
    .tit{color: fadeout(@color-blue,50%);font-size: 22px;margin-bottom: 20px;}
    .con{color: fadeout(@color-blue,70%);font-size: 18px;}
  }
}
@media (max-width: @sreen) {
  footer{display: none;}
  .menu-side{top: 32/@rem;right: 32/@rem;width: 64/@rem;height: 64/@rem;background: url("../img/home-menu.png") center center no-repeat;background-size: 100%;}
}

//详情组件
.detail{height:100%; background:url("../img/list_bg_app.jpg") 50% 0/contain no-repeat #f2f2f2; background-attachment:fixed;
  .detailNav{width:100%; height:125/@rem; background:rgba(227,227,227,0.35); border-bottom: 4/@rem #b8c0c4 solid;
    .logo{float:left; width:320/@rem; height:125/@rem; background:url("../img/list_logo_app.png") 0 0/contain no-repeat;}
    .menu{float:right; margin-top:36/@rem; margin-right:36/@rem;
      i{display: block; height:10/@rem; width:64/@rem; background:#46a5d6; margin-bottom: 10/@rem;}
    }
  }
  .detailTitle{display: none;}
  .detailArea{font-size:25/@rem; padding: 0 10%; margin:0 auto; padding-top: 90/@rem;
    .item{margin-bottom: 100/@rem;
      &:last-child{margin-bottom: 50/@rem;}
    }
    .title{font-size:40/@rem; color:#234f74; margin-bottom:50/@rem;}
    .desc{color:#495763; line-height:41/@rem; margin-bottom:50/@rem; text-align: justify;}
    img{display: block; width:100%; margin:0 auto 50/@rem;}
    .link{clear: both;
      a{color:#20bb8d;}
    }
  }
  .close{display:block; position: relative; width:125/@rem; height:125/@rem; background:#56bff6; margin:0 auto 50/@rem; border-radius:100%; line-height:125/@rem;
    i{position: absolute; left:50%; margin-left:-42/@rem; width:87/@rem; height:3px; background:#f2f2f2; margin-top:60/@rem; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform: rotate(-45deg);
      &:last-child{transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg);}
    }
  }
  .footer_app {width:90%; margin:30/@rem auto 150/@rem; color: #999; font-size: 25/@rem; line-height: 30/@rem; border-top:1px #d8d8d8 solid; padding-top: 25/@rem;
    &:before {content: ''; display: block; width: 33/@rem; height: 3/@rem; background: #999; margin-bottom: 20/@rem;}
  }
}
@media screen and (min-width: @sreen){
  .body{margin:0 auto; background:none;}
  .detail{background:#fff; position: relative; overflow: hidden; z-index: 5;
    .detailNav{display: none;}
    .detailTitle{border-bottom: 1px #d9d9d9 solid; height:100px; background:#fff; position:absolute; width:100%;display: block;
      .title{font-size:56px; height:100px; line-height: 100px; color:#556674; width:90%; margin:0 auto;}
      .close{display: block; margin:0; width:70px; height:70px; background:none; position: absolute; top:10px; right:20px;
        i{background: #458abc; width:70px; left:0; margin:0; top:35px;}
      }
    }
    .detailArea{font-size:18px; padding-top:150px; height: 80%; overflow: auto;
      .item{margin-bottom:90px;}
      .title{font-size:28px; margin-bottom: 35px;}
      .desc{line-height:30px; margin-bottom: 35px;}
      img{float:left; width:45%; margin-right:5%; margin-bottom:50px;
        &:nth-child(2n){margin-right:0;}
      }
    }
    .close{display: none;}
    .footer_app{display:none;}
  }
}

//侧边导航栏
.menu-cont{
  position: fixed;top: 0;bottom: 0;right: -700px;width: 619px;z-index: 101;background: url("../img/menu-cont-bg.jpg") repeat-y;
  .menu-close{position: absolute;top: 80px;left: -80px;width: 80px;height: 80px;background: url("../img/menu-close.jpg") no-repeat;background-size: 100%;
    cursor: pointer;}
  .tit{width: 130px;height: 100%;float: right;
    li{height: 33.33%;display: table;border-top: 1px solid #67afd2;background-color: rgba(0,0,0,0.9);transition: background 0.3s;
      &:first-child{border-top: none;}
      &.hover{background-color: #045681;
        a{color: #fff;}
      }
      a{display: table-cell;vertical-align: middle;text-align: center;font-size: 24px;color: #9e9e9e;width: 30px;padding:0 50px;transition: color 0.3s;}
    }
  }
  .cont{width: 489px;float: right;height: 100%;overflow: auto;
    dl{
      text-align: right;
      a{border-bottom: 1px solid #69bee7;display: block;padding: 0 10px;}
      dt{padding: 0 35px;
        a{font-size: 18px;color: #fff;line-height: 80px;}
      }
      dd{background:url("../img/menu-dd-bg.jpg") repeat-y;padding: 0 35px;
        a{color: #d3f2ff;font-size: 14px;line-height: 58px;}
      }
    }
  }
}
@media (max-width: @sreen) {
  .menu-cont{
    position: fixed;bottom: auto;height: 100%;top: -100%;right: 0;left: 0;width: 100%;background: none;
    .menu-close-m{height: 124/@rem;background-color: rgba(0,0,0,0.9);padding-right: 15/@rem;}
    .menu-close{position: static;width: 124/@rem;height:124/@rem;float: right;background: url("../img/menu-m-close.png");background-size: 100%;}
    .tit{width: 100%;height: 124/@rem;float: none;background-color: rgba(0,0,0,0.9);
      li{height: 100%;border-top: none;transition: none;float: left;
        &.hover{background-color: #4fb8eb;
          a{color: #fff;}
        }
        a{font-size: 30/@rem;color: #9e9e9e;width: 100%;padding:0 30/@rem;transition: none;}
      }
    }
    .cont{width: 100%;float: none;position: absolute;top: 248/@rem;bottom:0;overflow: auto;height: auto;background-color: rgba(0,0,0,0.5);
      dl{background: url("../img/menu-m-cont-bg.png") repeat-y;background-size: 100%;
        a{padding: 0 40/@rem;}
        dt{padding: 0;
          a{font-size: 32/@rem;color: #fff;line-height: 100/@rem;}
        }
        dd{padding: 0;background:url("../img/menu-m-dd-bg.png") repeat-y;background-size: 100%;
          a{font-size: 26/@rem;line-height: 74/@rem;}
        }
      }
    }
  }
}